<template>
  <div>
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBatch">删除
        </el-button>
        <el-table :data="list" style="width: 100%" row-key="id" size="small" @selection-change="selectionChange">
          <el-table-column type="selection" min-width="30" />
          <el-table-column label="角色名称" min-width="50">
            <template slot-scope="scope">
              <label>{{ scope.row.role_name }}</label>
            </template>
          </el-table-column>
          <el-table-column label="角色状态" min-width="40">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.role_status == 1" type="success" effect="dark" size="small">
                启用
              </el-tag>
              <el-tag v-if="scope.row.role_status == 0" type="warning" effect="dark" size="small">
                禁用
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注说明" min-width="40">
            <template slot-scope="scope">
              <label>{{ scope.row.role_remark }}</label>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="50">
            <template slot-scope="scope">{{ scope.row.create_time }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="50">
            <template slot-scope="scope">
              <el-link v-if="hasBtn('Role/addRole')" type="primary" :underline="false" @click="editValue(scope.row.id)">编辑</el-link>
              <el-link type="danger" :underline="false" @click="delValue(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog :title="param.id?'编辑角色':'新增角色'" :visible.sync="dialogAdminVisible" width="500px">
      <el-form ref="form" :model="param" :rules="rules" label-width="150px" class="demo-ruleForm" :show-message="false">
        <el-form-item label="角色名称" prop="role_name">
          <el-input v-model="param.role_name" size="small" />
        </el-form-item>
        <el-form-item label="角色状态">
          <el-radio-group v-model="param.role_status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注说明">
          <el-input v-model="param.role_remark" size="small" />
        </el-form-item>
        <el-form-item label="权限角色列表" prop="menu_id">
          <el-tree
            ref="tree"
            class="tree"
            :data="listMenu"
            show-checkbox
            node-key="id"
            :default-checked-keys="param.menu_id"
            :props="defaultProps"
            @check-change="getChecked"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAdminVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Menu } from '@/api/system/menu'
import { Role } from '@/api/system/role'
import { deleteValue } from '@/utils/public'
export default {
  name: 'Role',
  data() {
    return {
      list: [],
      param: {
        menu_id: []
      },
      rules: {
        role_name: { required: true, trigger: 'blur' },
        menu_id: { required: true, trigger: 'blur' }
      },
      listMenu: [],
      defaultProps: {
        children: 'children',
        label: 'menu_name'
      },
      dialogAdminVisible: false,
      selectId: []
    }
  },
  created() {
    Menu.listMenu().then((res) => {
      this.listMenu = res.data
    }).catch(() => {})
    this.getRole()
  },
  methods: {
    // 获取角色
    getRole() {
      Role.listRole().then((res) => {
        this.list = res.data
      }).catch(() => {})
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.id)
    },
    // 删除
    delBatch() {
      if (!this.selectId.length) {
        this.$message.error('请先选择要删除的数据,在进行操作！')
        return false
      }
      this.delValue(this.selectId.join(','))
    },
    delValue(id) {
      deleteValue({
        _this: this,
        success: (res) => {
          Role.delRole({ id }).then((res) => {
            this.$message.success('删除成功')
            this.getRole()
          }).catch(() => {})
        }
      })
    },
    add() {
      this.param = {
        role_status: 1,
        menu_id: []
      }
      this.dialogAdminVisible = true
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([])
      })
    },
    // 编辑
    editValue(id) {
      Role.getRole({ id }).then((res) => {
        console.log(res.data)
        this.param = res.data
        this.dialogAdminVisible = true
      }).catch(() => {})
    },
    getChecked() {
      var selectValue = this.$refs.tree.getCheckedNodes()
      var ids = []
      selectValue.forEach(ele => {
        ids.push(ele.id)
      })
      this.param.menu_id = ids
    },
    // 确定
    determine() {
      if (!this.param.menu_id.length) {
        this.$message.error('请选择权限菜单')
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.param.menu_id)
          const param = JSON.parse(JSON.stringify(this.param))
          if (param.menu_id) {
            param.menu_id = param.menu_id.join(',')
          }
          Role.addRole(param).then((res) => {
            this.dialogAdminVisible = false
            this.getRole()
          }).catch(() => {})
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tree{
margin-top: 5px;
}
</style>
